window.addEventListener('load', function () {
    // 获取api数据  渲染到页面
    let apiCateData = [
        { name: "全部", keyword: "身份证实名", isBold: false },
        { name: "生活服务", keyword: "银行卡", isBold: false },
        { name: "金融科技", keyword: "短信", isBold: false },
        { name: "交通地理", keyword: "天气", isBold: false },
        { name: "充值缴费", keyword: "短信", isBold: false },
        { name: "数据智能", keyword: "手机归属地", isBold: false },
        { name: "企业工商", keyword: "IP", isBold: false },
        { name: "应用开发", keyword: "手机归属地", isBold: false },
        { name: "电子商务", keyword: "IP", isBold: false },
        { name: "吃喝玩乐", keyword: "视频", isBold: false },
        { name: "文娱视频", keyword: "视频", isBold: false },
        { name: "免费接口大全", keyword: "短信", isBold: true },
        { name: "短信", keyword: "身份证实名", isBold: false },
        { name: "汽车", keyword: "银行卡", isBold: false },
        { name: "核验", keyword: "银行卡", isBold: false },
        { name: "最新发布", keyword: "银行卡", isBold: true },
        { name: "API私有化", keyword: "身份证实名", isBold: true }
    ];
    let apiCate = getEle('#api');
    apiCateData.forEach(function (v) {
        // console.log(v);
        let dom = document.createElement('li');
        // 给li添加属性
        dom.setAttribute('keyword', v.keyword);

        // 判断是否加粗
        if (v.isBold) {
            dom.setAttribute('class', 'fbold');
        }

        dom.innerText = v.name;
        apiCate.appendChild(dom);
    })

    // 动态渲染搜索框内容
    let apiLis = getEleAll('#api li');
    let apiName = getEle('#apiName');
    let apiKey = getEle('#apiKey');
    apiLis.forEach(function(v,j){
        v.addEventListener('click',function(){

            console.log(v);
            
            // 获取当前li的ketword属性
            // let keyw = this.setAttribute('keyword',v.keyword);
            apiKey.placeholder = this.getAttribute('keyword');
            // console.log(keyw);
            // 遍历数组 更改点击样式
            apiLis.forEach(function(v,i){
                v.classList.remove('changeColor');
            })
            v.classList.add('changeColor');
            // console.log(v.textContent);

            // 点击更改input前的标题
            apiName.textContent = v.textContent;
            // console.log(v.keyword);
            // apiKey.placeholder= v.keyword;
            // 获取数组中的keyword属性
            apiKey.placeholder = apiCateData[j].keyword;
        })
    })

    // api内容页
    let apiContData = [
        // 第一组数据
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务", price: "￥0.4000/次", isShow: true },
        

        // 第二组数据
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证2", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验2", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务2", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证2", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验2", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务2", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证2", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验2", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务2", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证2", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报2", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验2", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务2", price: "￥0.4000/次", isShow: true },
        
        // 第三组数据
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证3", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验3", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务3", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证3", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验3", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务3", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证3", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验3", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务3", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证3", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报3", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验3", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务3", price: "￥0.4000/次", isShow: true },
        
        
        // 第四组数据
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证4", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验4", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务4", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证4", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验4", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务4", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证4", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验4", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务4", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证4", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报4", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验4", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务4", price: "￥0.4000/次", isShow: true },
        
        
        // 第五组数据
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证5", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验5", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务5", price: "￥0.4000/次", isShow: true },

        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证5", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验5", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务5", price: "￥0.4000/次", isShow: true },

        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证5", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验5", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务5", price: "￥0.4000/次", isShow: true },
        
        { imgUrl: "./imgs/API_01.jpg", title: "2021出行防疫政策指南5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_02.jpg", title: "身份证实名认证5", price: "￥0.2000/次", isShow: true },
        { imgUrl: "./imgs/API_03.jpg", title: "天气预报5", price: "免费", isShow: false },
        { imgUrl: "./imgs/API_04.jpg", title: "银行卡四元素校验5", price: "￥0.3000/次", isShow: true },
        { imgUrl: "./imgs/API_05.jpg", title: "短信API服务5", price: "￥0.4000/次", isShow: true }

    ];

    let currentPages = 0;
    let sPages = 20;
    // 封装函数
    function rander(currentPages, sPages) {
        // 截取数组
        let pagesData = apiContData.slice(currentPages, sPages);


        // 定义保存结构
        let apiContHtml = '';
        pagesData.forEach(function (v) {
            // 拼接结构
            apiContHtml += `<li class="rel">
                <span class="tips font12 abs ${v.isShow ? 'on' : ''}">企业专用</span>
                <div class="dis">
                    <a href="#">
                        <img src="${v.imgUrl}" alt="">
                        <p class="col666 font14">
                            ${v.title}
                        </p>
                        <span class="font14 ${v.price == '免费' ? 'green' : 'red'}">${v.price}</span>
                    </a>
                </div>
                <a href="#" class="colff link tcenter abs font12">申请数据</a>
            </li>`
        })

        // 将遍历到的内容加到指定位置
        getEle('.api-content').innerHTML = apiContHtml;
    }
    rander(currentPages, sPages);

    // 按钮点击事件
    let btn = getEleAll('.page-list a');
    btn.forEach(function (v) {
        // 给每一个分页按钮添加点击事件
        v.addEventListener('click', function () {
            // console.log(v);
            // 点击时的样式
            btn.forEach(function(v){
                v.classList.remove('activeBtn');
            })
            v.classList.add('activeBtn');

            // 点击时页面跳转
            // console.log(this);
            let index = this.textContent;
            console.log(index);
            rander((index-1)*20,index*20);
        })
    })

})
